<template>
	<view class="zone">
		<u-navbar :is-back="false" :height="60" :background="background" :border-bottom="false">
			<view class="slot-wrap">
				<view class="nav-bar2">
					<u-icon class="back" size="20px" color="#fff" @click="$p.back()" name="arrow-left"></u-icon>
					<view class="n_left">
						 <image src="http://img.cpgm.cc/panda/static/invite/title.png" mode="widthFix" /> 
					</view>
				</view>
			</view>
		</u-navbar>

		<view class="main">
			<!-- 中间盒子 -->
			<view class="center">
				<image class="l2 zindex" @click="$p.navto('/pages/invitebox/word')" src="http://img.cpgm.cc/panda/static/invite/l1.png" mode="widthFix" />
				<image class="l3 zindex" @click="$p.navto('/pages/invitebox/lucky')" src="http://img.cpgm.cc/panda/static/invite/l2.png" mode="widthFix" />
				<image class="l4" @click="$p.navto('/pages/home/bounds')" src="http://img.cpgm.cc/panda/static/invite/l3.png" mode="widthFix" />

				<image class="r2 zindex" @click="$p.navto('/pages/my/inviteFriends')" src="http://img.cpgm.cc/panda/static/invite/r1.png" mode="widthFix" />
				<image class="r3 zindex" @click="$p.navto('/pages/invitebox/openlog')" src="http://img.cpgm.cc/panda/static/invite/r2.png" mode="widthFix" />
				<image class="r4 zindex" @click="pxplainshow = true" src="http://img.cpgm.cc/panda/static/invite/r3.png" mode="widthFix" />
				<image class="img1" src="http://img.cpgm.cc/panda/static/invite/box2.png" mode="widthFix" />
			</view>

			<view class="btnbox ">
				<view class="leftbtn w60" >  
					<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" @click="ivopernJewel(1)" class="button lbtn">
						<view class="posabtn">
							<text>立即开箱</text>
							<text>邀请实名好友送2次开箱机会</text>
						</view>
					</u-button>
					<view class="num">
						<image src="http://img.cpgm.cc/panda/static/invite/box1.png" mode="widthFix" />
						<text>剩余开箱次数: {{userinfo.turn_num}}</text>
					</view>
				</view>

				<view class="leftbtn w38">
					<view class="button rbtn" @click="sureshow = true">
						<view class="posabtn">
							<text>银元开箱</text>
							<text>1.5银元可开一次</text>
						</view>
					</view>
					<view class="num">
						<image src="http://img.cpgm.cc/panda/static/self/yb.png" mode="widthFix" />
						<text>剩余银元数量: {{userinfo.silver}}</text>
					</view>
				</view>
			</view>

			<view class="explain">
				活动申明：严禁通过悬赏平台放单、批量多开、机刷等违规作弊行为，违规用户视为无效奖励！
			</view>

			<!-- 底部按钮 -->
			<!-- <view class="bottombox">
				<view class="topimg	">
					<image src="http://img.cpgm.cc/panda/static/invite/btnimg.png" mode="widthFix" />
					<view>邀请好友实名赠送1次开箱机会，可叠加</view>
				</view>
				<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="btn button" >
					立即开箱
				</u-button>
			</view> -->
		</view>

		<!-- 跑马灯 -->
			<view class="scrollbox">
				<image class="s_bg" src="http://img.cpgm.cc/panda/static/invite/bot.png" mode="widthFix" />
				<view class="bgbox">
					<view class="u-notice-content">
						<image src="http://img.cpgm.cc/panda/static/invite/long.png" mode="heightFix" />
					</view>
				</view>
			</view>


		<!-- 确定开宝箱弹窗 -->
		<u-mask :show="sureshow">
			<view class="warp">
				<view class="surebox">
					<view class="m_tit">确定开宝箱</view>
					<view class="m_con2">是否消耗 <text>1.5</text> 银元开宝箱？</view>
					<view class="m_btn">
						<view class="button cancel" @click="sureshow = false">取消</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" @click="ivopernJewel(2)" class="button confirm" >开箱</u-button>
					</view>
				</view>
			</view>
		</u-mask>


		<!-- 银元不足弹窗 -->
		<u-mask :show="notenough">
			<view class="warp">
				<view class="surebox">
					<image class="yb" src="http://img.cpgm.cc/panda/static/self/yb.png" mode="widthFix" />
					<view class="m_tit">银元不足</view>
					<view class="whitebg">
						<view class="m_con">请先获得银元再来开宝箱</view>
						<view class="m_invite">
							<view class="m_left">
								<view class="m_word">
									<text>邀请实名好友送2次开箱机会</text>
									<text>邀请越多，开箱机会越多</text>
								</view>
							</view>
							<view class="button" @click="$p.navto('/pages/my/inviteFriends')">邀请</view>
						</view>
					</view>
				</view>
				<image class="close" @click="notenough = false" src="http://img.cpgm.cc/panda/static/feed/cha.png" mode="widthFix" />
			</view>
		</u-mask>

		<!-- 次数不足 -->
		<u-mask :show="numenough">
			<view class="warp">
				<view class="surebox">
					<view class="m_tit">开箱次数不足</view>
					<view class="whitebg">
						<view class="m_invite">
							<view class="m_left">
								<view class="m_word">
									<text>邀请实名好友送2次开箱机会</text>
									<text>邀请越多，开箱机会越多</text>
								</view>
							</view>
							<view class="button" @click="$p.navto('/pages/my/inviteFriends')">邀请</view>
						</view>
					</view>
				</view>
				<image class="close" @click="numenough = false" src="http://img.cpgm.cc/panda/static/feed/cha.png" mode="widthFix" />
			</view>
		</u-mask>

		<!-- 银元转赠 -->
		<u-mask :show ="popshow">
			<view class="playbox" :class="[popshow?'playboxac':'']">
				<image class="closed2" @click="popshow = false" src="http://img.cpgm.cc/panda/static/public/close.png" mode="widthFix" />
				<view class="content">
					<image class="yb" src="http://img.cpgm.cc/panda/static/invite/box2.png" mode="widthFix" />
					<h3>开箱奖励</h3>
					<scroll-view scroll-y class="ranklist">
					<view class="flwarp">
						<view class="p_item" v-for="(item,index) in rewardlist" :key="index">
							<view class="p_top">
								<image :src="imgurl + item.img" mode="widthFix" />
							</view>
							<view class="p_bot">
								<text>{{item.name}} <span v-if="item.id == 1">*{{item.num}}</span> </text>
								<text>{{item.desc}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
					<view class="button" @click="popshow = false">开心收下</view>
				</view>
			</view>
		</u-mask>


		<u-mask :show="pxplainshow">
			<view class="warp">
				<view class="explainbox">
					<image src="http://img.cpgm.cc/panda/static/lucky/explain.png" mode="widthFix" />
					<image class="closedd" @click="pxplainshow = false" src="http://img.cpgm.cc/panda/static/feed/cha.png" mode="widthFix" />
				</view>
			</view>
		</u-mask>



	</view>
</template>

<script>
import config from '@/common/config/index.js'
	export default {
		data() {
			return {
				background: {
					backgroundColor: 'transparent',
				},
				imgurl: config.imgurl,
				sureshow:false,//确定开宝箱弹窗
				notenough:false,//银元不足弹窗
				popshow:false,//恭喜您开出弹出层
				numenough:false,//次数不足
				rewardlist:'',//用来保存开出奖励的数据
				bouns:[
					{},
					{
						id:1,
						explain:'100大米'
					},
					{
						id:2,
						explain:'0.01~5大米'
					},
					{
						id:3,
						explain:'0.02~10大米'
					},
					{
						id:4,
						explain:'0.05~20大米'
					},
					{
						id:5,
						explain:'0.1~50大米'
					},
					{
						id:6,
						explain:'0.2~100大米'
					},
					{
						id:7,
						explain:'0.5~300大米'
					},
					{
						id:8,
						explain:'1~600大米'
					},
					{
						id:9,
						explain:'2~1000大米'
					},
					{
						id:10,
						explain:'1米'
					},
					{
						id:11,
						explain:'5米'
					},
					{
						id:12,
						explain:'18米'
					},
					{
						id:13,
						explain:'68米'
					},
					{
						id:14,
						explain:'188米'
					},
					{
						id:15,
						explain:'388米'
					},
					{
						id:16,
						explain:'999米'
					},
					{
						id:17,
						explain:'1888米'
					},
					{
						id:18,
						explain:'188米'
					},
					{
						id:19,
						explain:'88米'
					},
					{
						id:20,
						explain:'38米'
					},
					{
						id:21,
						explain:'18米'
					},
					{
						id:22,
						explain:'5米'
					},
					{
						id:23,
						explain:'3米'
					},
					{
						id:24,
						explain:'1米'
					},
					{
						id:25,
						explain:'1888米'
					},
					{
						id:26,
						explain:'1888米'
					},
					{
						id:27,
						explain:'666米'
					},
					{
						id:28,
						explain:'666米'
					},
					{
						id:29,
						explain:'6666米'
					},
					{
						id:30,
						explain:'6666米'
					},
					{
						id:31,
						explain:'6666米'
					},
					{
						id:32,
						explain:'6666米'
					},
					{
						id:33,
						explain:'6666米'
					}
				],
				userinfo: uni.getStorageSync('userinfo'),
				pxplainshow:false,
			};
		},
		onShow(){
			this.getUserInfo();
		},
		methods: {
			// 获取个人信息
			getUserInfo(){
				this.$getUserInfo.getUserInfo((res)=>{
					if(res.code == 1) {
						this.userinfo = res.data
					}
				})
			},
			// 获取分红方式文字
			getexplain(id){
				if(id == 1){
					return '≈兑换'
				}else if( id > 1 && id < 10) {
					return '每日分红'
				}else  if( id > 9 && id < 18){
					return '每日固定分红'
				}else if( id > 17 && id < 25) {
					return '直接兑换'
				}else if( id > 24) {
					return '集齐兑换'
				}
			},
			

			// 邀请活动-开宝箱接口
			async ivopernJewel(type){
				let res = await this.$http.index.ivopernJewel({
					type:type
				})
				if(res.code == 1) {
					this.sureshow = false
					this.rewardlist = res.data
					this.popshow = true
					this.getUserInfo();
				}else if(res.code == -101) {
					this.sureshow = false
					this.notenough = true
				}else if(res.code == -102) {
					this.sureshow = false
					this.numenough = true
				}else {
					this.$u.toast(res.msg)
				}
			},
		},
	}
</script>

<style lang="less">

.zone {
	background: url('http://img.cpgm.cc/panda/static/invite/bg.jpg') no-repeat;
	background-size: 100% 100%;
	min-height: 100vh;
}

.nav-bar2 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 60px;
		padding: 0px 10px;
	}

	.n_left {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		text {
			color: rgba(255, 255, 255, 0.8);
			font-size: 12px;
			margin-left: 5px;
			margin-bottom: 10px;
		}
		image {
			width: 80%;
			margin-left: 5px;
			margin-top: 20px;
		}
	}

	.shouxu {
		color: #fff;
		font-size: 14px;
	}

	.main {
		padding: 10px;
	}


	.center {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.img1 {
			width: 90%;
			position: relative;
			z-index: 98;
		}
		.img2 {
			width: 75%;
			margin-top: -35px;
		}

		
		

		.l2 {
			width: 58px;
			position: absolute;
			left: 5px;
			top: 10%;
		}

		.l3 {
			width: 58px;
			position: absolute;
			left: 5px;
			top: 38%;
			z-index: 99;
		}

		.l4 {
			width: 58px;
			position: absolute;
			left: 5px;
			top: 66%;
			z-index: 99;
		}

		.r2 {
			width: 58px;
			position: absolute;
			right: 5px;
			top: 10%;
		}

		.r3 {
			width: 58px;
			position: absolute;
			right: 5px;
			top: 38%;
			z-index: 99;
		}

		.r4 {
			width: 58px;
			position: absolute;
			right: 5px;
			top: 66%;
			z-index: 99;
		}

		.posabox {
			position: absolute;
			bottom: 10%;
			background: linear-gradient(180deg, #FFFFFF 0%, #D8D8D8 100%);
			border-radius: 13px;
			padding: 5px 10px;
			display: flex;
			align-items: center;

			image {
				width: 16px;
			}

			text {
				color: #000000;
				font-size: 12px;
			}
		}
	}

	.s_bg {
		width: 100%;
	}

	.scrollbox {
		position: relative;
		background: rgba(0,0,0,0.7);
		box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
		border-radius: 5px;
		margin-top: 20px;
		overflow: hidden;
		line-height: 0;
		max-width: 480px;

		p {
			color: #fff;
			font-size: 14px;
			margin-bottom: 10px;
		}
	}

	 .zindex {
		z-index: 99;
	 }


.bgbox {
	width: 90%;
	position: absolute;
	bottom: 17%;
	left: 5%;
	background: #EFFFE2;
	box-shadow: 0px -3px 9px 0px rgba(0,0,0,0.1);
	border-radius: 5px 5px 11px 11px;
	overflow: hidden;
	padding: 10px 0;
}

.u-notice-content {
	animation: u-loop-animation 20s linear infinite both;
	text-align: right;
	// 这一句很重要，为了能让滚动左右连接起来
	padding-left: 100%;
	align-items: center;
	flex-wrap: nowrap;
	

	image {
		height: 130px;
		position: relative;
		z-index: 999;
	}
}

@keyframes u-loop-animation {
	0% {
		transform: translate3d(0, 0, 0);
	}

	100% {
		transform: translate3d(-450%, 0, 0);
	}
}



.bottombox {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;

	.button {
		position: relative;
		width: 80%;
		height: 55px;
		background: linear-gradient(180deg, #FFF8B5 0%, #FFFFEB 100%);
		box-shadow: 0px 5px 0px 0px rgba(186,133,60,1);
		border-radius: 5px;
		margin-top: -10%;
		color: #000000;
		font-size: 16px;
		font-weight: 600;
	}
}

.topimg {
	width: 80%;
	display: flex;
	align-items: center;

	image {
		width: 30%;
	}

	view {
		flex: 1;
		font-size: 12px;
		background: #FFFFFF;
		border-radius: 12px 12px  12px 0;
		border: 1px solid #000000;
		padding: 5px;
		zoom: 0.9;
		margin-bottom: 15px;
		color: #000000;
	}
}





// 确定开宝箱
.surebox {
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	box-shadow: inset 5px 5px 45px 0px rgba(255,255,255,0.5), inset -5px -5px 45px 0px rgba(255,255,255,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	border-radius: 18px;
	padding: 20px;
	display: flex;
	flex-direction: column;

	.yb {
		position: relative;
		width: 35%;
		margin: 0 auto;
		margin-top: -25%;
	}
}

.m_tit {
	color: #000000;
	text-align: center;
	font-size: 20px;
	font-weight: 600;
}

.m_con {
	color: #696969;
	font-weight: 600;
	text-align: center;
	margin: 20px 0;
	text {
		color: #000000;
	}
}

.m_con2 {
	color: #696969;
	font-weight: 600;
	text-align: center;
	margin: 30px 0;
	text {
		color: #000000;
	}
}
.m_btn {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.button {
		width: 45%;
		height: 50px;
		font-size: 18px;
		font-weight: 600;
	}

	.cancel {
		background:  #EAEAEA;
		box-shadow: inset 0px -5px 0px 0px rgba(0,0,0,0.3);
		border-radius: 5px;
		border: 1px solid #000000;
		color: #000000;
		font-size: 14px;
		font-weight: 600;
	}

	.confirm {
		background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
		background-size: 100% 100%;
		border-radius: 5px;
		color: #B73800;
	}
}



// 银元不足弹窗

.m_line {
	width: 100%;
	height: 1px;
	background: rgba(0,0,0,0.1);
}

.whitebg {
	background: rgba(255, 255, 255, 0.8);
	padding:15px 10px;
	margin-top: 20px;
	border-radius: 10px;
}
.m_invite {
	background: url('http://img.cpgm.cc/panda/static/public/btn3.png');
	background-size: 100% 100%;
	border-radius: 7px;
	padding: 15px 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.button {
		width: 54px;
		height: 33px;
		background: #000000;
		border-radius: 5px;
		color: #fff;
		font-size: 12px;
	}
}

.m_left {
	display: flex;
	align-items: center;

	image {
		width: 38px;
		margin-right: 5px;
	}

	.m_word {
		display: flex;
		flex-direction: column;

		text:nth-child(1) {
			color: #000;
			font-weight: 600;
			font-size: 14px;
		}

		text:nth-child(2) {
			color: #343434;
			font-size: 12px;
			margin-top: 4px;
		}
	}
}

.close {
	width: 25px;
	margin: 20px auto 0;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}





// 恭喜您开出弹出层

// pop弹窗
.popbox {
	background: linear-gradient(180deg, #EACFB7 0%, #FFFFFF 100%);
	height: 300px;
	padding: 15px;
}

.pkimg {
	width: 40%;
	position: absolute;
	top: 0;
	transform: translate(-50% ,-60%);
	left: 50%;
}

.p_tit {
	color: #000;
	font-size: 22px;
	font-weight: 600;
	text-align: center;
	margin-top: 40px;
}



.p_drawer {
	position: fixed;
	z-index: 10007;
	width: 100%;
	left: 0;
	bottom: -60vh;
	background: linear-gradient(180deg, #EACFB7 0%, #FFFFFF 100%);
	height: 60vh;
	padding: 15px;
	border-radius: 20px 20px 0 0;
}

.ranklist {
	height: 36vh;
	padding: 20px ;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 10px;
	margin-top: 15px;
}

.drawer-show {
	transform: translateY(-100%);
	transition: all 0.25s linear;
}

.drawer-visible {
	transition: all 0.25s linear;
	transform: translate3D(0px, 0px, 0px) !important;
}

.flwarp {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding-bottom: 80px;
}
.p_item {
	width: 30%;
	margin: 0 1.66%;
	margin-bottom: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;

	.p_top {
		width: 86%;
		background: linear-gradient(180deg, #FFED67 0%, #FFF494 100%);
		border-radius: 7px;
		border: 2px solid #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;

		image {
			width: 100%;
		}
	}

	.p_bot {
		display: flex;
		flex-direction: column;
		align-items: center;

		text:nth-child(1) {
			margin-top: 2px;
			color: #000000;
			font-size: 13px;
			font-weight: 600;
		}
		text:nth-child(2) {
			color: #000000;
			font-size: 12px;
			zoom: 0.8;
		}
	}
}

.ling {
	position: absolute;
	bottom: 6%;
	left: 10%;
	width: 80%;
	height: 50px;
	background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
	border-radius: 5px;
	color: #fff;
	font-size: 14px;
}



.btnbox {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	align-items: flex-start;
	margin-top: 20px;
}

.w60 {
	width: 58%;
}
 .w38 {
	width: 40%;
}
.lbtn {
	width: 100%;
	background: linear-gradient(225deg, #FFEE68 0%, #FEE75C 54%, #FFF578 100%);
	box-shadow: inset 0px -5px 0px 0px rgba(0,0,0,0.3), inset 9px -9px 18px 0px rgba(255,255,255,0.5), inset 0px 5px 0px 0px rgba(255,255,255,0.5);
	border-radius: 91px 5px 5px 91px;
}

.rbtn {
	width: 100%;
	background: linear-gradient(180deg, #FFF8B5 0%, #FFFFEB 100%);
	box-shadow: inset 0px -5px 0px 0px rgba(0,0,0,0.3);
	border-radius: 5px 91px 91px 5px;
}

.leftbtn {
	display: flex;
	flex-direction: column;
	align-items: center;
	
	.button {
		position: relative;
		padding: 0;
		margin: 0;
		height: 60px;

		image {
			height: 60px;
		}

		.posabtn {
			width: 100%;
			position: absolute;
			display: flex;
			flex-direction: column;
			align-items: center;
			text:nth-child(1) {
				color: #523E1F;
				font-weight: 600;
				font-size: 14px;
			}

			text:nth-child(2) {
				color: #000;
				font-size: 12px;
			}
		}
	}

	.num {
		position: relative;
		width: fit-content;
		background: linear-gradient(180deg, #FFFFFF 0%, #D8D8D8 100%);
		display: flex;
		align-items: center;
		border-radius: 20px;
		margin-top: 20px;
		padding: 5px;

		image {
			width: 20px;
			margin-right: 2px;
		}
		text {
			color: #000;
			font-size: 12px;
			zoom: 0.8;
		}
	}

.num::after {
   content: "";
        position: absolute;
        top:-11px;
        left:46%;
        z-index: 1;
        width:0px;
        height: 0px;
        border: 6px solid transparent;
        border-bottom:6px solid #fff;
	}
}

.rightbtn {
	width: 48%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 60px;
	background: linear-gradient(180deg, #FFF8B5 0%, #FFFFEB 100%);
	box-shadow: 0px 5px 0px 0px rgba(186,133,60,1);
	border-radius: 5px;

	.toptext {
		color: #000;
		font-weight: 600;
		font-size: 14px;
	}

	.num2 {
		display: flex;
		align-items: center;

		image {
			width: 20px;
		}
		text {
			color: #000;
    		font-size: 12px;
		}
	}
}

.button {
	line-height: 20px !important; 
}

.mart20 {
	margin-top: 20px;
}



/* 在屏幕可视窗口尺寸 */
 @media screen and (min-height:765px){
  
	// .scrollbox {
	// 	position: fixed;
	// 	bottom: 0;
	// 	left: 50%;
	// 	width: 100%;
	// 	max-width: 480px;
	// 	transform: translateX(-50%);
	// }
}







// 转赠


.playbox {
	width: 100%;
	position: absolute;
	left: 0%;
	bottom: -50vh;
	background: url('http://img.cpgm.cc/panda/static/mask/bbg.png');
	background-size: 100% 100%;
	transition: all 0.3s linear;

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;

		.yb {
			width: 52%;
			margin-top: -30%;
		}

		h3 {
			position: relative;
			color: #000000;
			font-size: 20px;
			width: 50%;
			text-align: center;
			z-index: 2;
		}

		.explain {
			color: #333333;
			font-size: 14px;
			margin: 10px 0;
			text {
				font-weight: 600;
			}
		}

		h3::after {
			content: '';
			width: 100%;
			height: 30px;
			background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
			background-size: 100% auto;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}


		.button {
			height: 68px;
			width: 100%;
			background: url('http://img.cpgm.cc/panda/static/public/btn3.png');
			background-size: 100% 100%;
			color: #B73800;
			font-size: 18px;
			font-weight: 600;
			margin-top: 10px;
		}

	}
	.closed2 {
		position: absolute;
		width: 25px;
		top: 8%;
		right: 15px;
	}

	.tips {
		width: 100%;
		text-align: left;
		color: #696969;
		font-size: 12px;
		margin-top: 5px;
	}
}

.playboxac {
	bottom:0 !important;
}




.explainbox {
	image {
		width: 100%;
	}

	.closedd {
		width: 25px !important;
		margin: 20px auto 0;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}
}


.explain {
	background: rgba(255, 255, 255, 0.1);
	padding: 10px;
	color: #FFEC65;
	font-size: 12px;
	margin-top: 15px;
}



</style>
